<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>06图标菜单和按钮组件</title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
    <style>
        .a{
            height: 50px;
            width: 200px;
            border: 1px solid #ccc;
            background-color: #eee;
        }
    </style>
</head>

<body style="margin: 50px;">

    <!-- i 和 span 配合icon图标使用 -->
    <i class="glyphicon glyphicon-star"></i>
    <span class="glyphicon glyphicon-star"></span>

    <button class="btn btn-default btn-lg">
        <!-- 可改变icon的大小  -->
        <i class="glyphicon glyphicon-star"></i>
    </button>

    <div class="dropdown">
        <button class="btn btn-default">
            下拉菜单
            <!-- 下拉菜单的小图标 -->
            <span class="caret"></span>
        </button>
    </div>

    <!-- 下拉菜单样式 dropup  上拉 -->
    <div class="dropdown">
        <button class="btn btn-default" data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>
        <!-- 必须要给ul  class     dropdown-menu-right 菜单项居右对齐 -->
        <ul class="dropdown-menu dropdown-menu-right">
            <!-- 标题样式   分割线 -->
            <li class="dropdown-header">网站标题</li>
            <li><a href="#">首页</a></li>
            <li><a href="#">资讯</a></li>
            <li class="divider"><a href="#">产品</a></li>
            <li class="disabled"><a href="#">关于</a></li>
        </ul>
    </div>

    <br/>
    <br/>
    <div class="btn-toolbar">
        <div class="btn-group btn-group-lg">
            <button class="btn btn-default">左</button>
            <button class="btn btn-default">中</button>
            <button class="btn btn-default">右</button>
        </div>

         <div class="btn-group btn-group-lg">
            <button class="btn btn-default">左</button>
            <button class="btn btn-default">中</button>
            <button class="btn btn-default">右</button>
        </div>
        
    </div>
    
    <br/>
    <br/>
    <br/>
    <!-- 按钮组组件 -->
    <!-- <div class="btn-toolbar"> -->
    <div class="btn-group">
        <!-- 嵌套一个分组 比如下拉菜单 -->
        <button type="button" class="btn btn-default">左</button>
        <button type="button" class="btn btn-default">中</button>
        <button type="button" class="btn btn-default">右</button>
        <div class="btn-group">
            <!-- 需要加入  dropdown-toggle 才能变成圆角 -->
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
            </button>
            <!-- 必须要给ul  class     dropdown-menu-right 菜单项居右对齐 -->
            <ul class="dropdown-menu">
                <!-- 标题样式   分割线 -->
                <li class="dropdown-header">网站标题</li>
                <li><a href="#">首页</a></li>
                <li><a href="#">资讯</a></li>
                <li class="divider"><a href="#">产品</a></li>
                <li class="disabled"><a href="#">关于</a></li>
            </ul>
        </div>
    </div>

    <br/>
    <br/>
    <!-- 设置按钮组垂直排列 -->
    <div class="btn-group-vertical">
        <button class="btn btn-default">左</button>
        <button class="btn btn-default">中</button>
        <button class="btn btn-default">右</button>
    </div>

    <br/>
    <br/>
    <!-- 设置两端对齐按钮组  使用a标签 -->
    <div class="btn-group-justified">
        <a class="btn btn-default">左</a>
        <a class="btn btn-default">中</a>
        <a class="btn btn-default">右</a>
    </div>
    <!-- 如果想要按钮也这样  那么就需要对每个按钮进行群组 -->
    <div class="btn-group-justified">
        <div class="btn-group">
            <button type="button" class="btn btn-default">左</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">中</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">右</button>
        </div>
    </div>

    <br/>
    <br/>
    <!-- 分裂式下拉菜单 dropup 向上弹出式 -->
    <div class="btn-group">
        <button  class="btn btn-default">下拉菜单</button>    
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">网站标题</li>
            <li><a href="#">首页</a></li>
            <li><a href="#">资讯</a></li>
            <li class="divider"><a href="#">产品</a></li>
            <li class="disabled"><a href="#">关于</a></li>
        </ul>
    </div>


    <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
    <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
</body>
</html>